import React, { Component } from 'react'
import {Table,Button,Popconfirm,message, Pagination} from 'antd'
import Adduser from '../User/NormalUser/AddNorUser'
import EditUser from '../User/NormalUser/EditNorUser'
export default class NormalUser extends Component {
    state={
        
        showAddUserDialog: false,//显示添加用户的对话框
        showEditUserDialog:false,//显示修改的对话框
        editUserRow:null,//当前编辑的用户信息
        deletelist:[],
        // userlist:[],
        userlist:[],
        columns:[{key:'user_id',title:'用户id',dataIndex:'user_id'},
            {key:'user_',title:'用户头像',dataIndex:'user_img'},
            {key:'user_sig',title:'用户签名',dataIndex:'user_sig'},
            {key:'user_nickname',title:'用户昵称',dataIndex:'user_nickname'},
            {key:'del',title:'编辑',dataIndex:'del',
            render:(del,row)=>{
                return(
                    <div >
                        <Button 
                        onClick={()=>this.setState({showEditUserDialog:true,editUserRow:row})}
                        style={{width:'60px'}}  type="primary">编辑</Button>
                        <Popconfirm 
                            onConfirm={()=>{this.deleteUser(row.id)}}
                            onText='确认'
                            cancelText='取消'
                            title="您确认要删除吗"
                        >
                            <Button style={{width:'60px'}}  type="danger" >删除</Button>
                        </Popconfirm>
                    </div>
                )
            }}]
    }



    componentDidMount() {
        // axios.get('https://wx.xxmtcds.top:2333/adminlogin')
        // .then(res=>{
        //     console.log(res);
        //     this.setState({userlist: res.data})
        // })
        // .catch(error=>{
        //     console.log(error);
        // })
    }

    // componentDidMount() {
    //     store.dispatch(LoadUserActionAsync(this.state.params));
    // }


    //多选删除
    deletelist=()=>{
        const {deletelist,userlist}=this.state;
        console.log(deletelist);//传给后端
        let newlist=userlist;
        for(let i=0;i<deletelist.length;i++){
            newlist = newlist.filter(item=>item.id !== deletelist[i].id);
        }
        
        this.setState({ userlist: newlist });
    }
    //行删除
    deleteUser=(id)=>{
        console.log(id);
        const {userlist}=this.state;
        let templist=userlist;
        templist=templist.filter((item)=>item.id!=id)
        this.setState({ userlist: templist });
    }
    hideAddUserDialog = () => {
        this.setState({showAddUserDialog: false});
      }
    hideEditUserDialog=()=>{
        this.setState({showEditUserDialog: false});
    }
    userRowSelection={
        onChange:(selectedRowKeys,selectedRows)=>{
            this.setState({deletelist:selectedRows});//主码
        }
    }

    adduser=(e)=>{
       this.setState({userlist:[...this.state.userlist,e]});
    //    console.log(this.state.userlist);
   }
 
   edituser=(oldval,newval)=>{
    
        let templist=this.state.userlist;
        let arr=[];
        templist.forEach(item=>{
            if(item.id!=oldval.id){
                arr.push(item);
            }else{
                arr.push(newval);
            }
        })
        this.setState({userlist:arr});
   }


  render() {
    return (
        <div>
            <Button onClick={()=> this.setState({showAddUserDialog: true})} type="primary">添加</Button>
            <Popconfirm 
                onConfirm={this.deletelist}
                onText='确认'
                cancelText='取消'
                title="您确认要删除吗"
            >
                <Button type="danger">删除</Button>
            </Popconfirm> 
            <Table
                bordered
                style={{backgroundColor:'#FEFEFE'}}
                dataSource={this.state.userlist} 
                columns={this.state.columns}
                rowSelection={this.userRowSelection}//多选框
                rowKey='id'//主键
                pagination={{pageSize:7}}

            ></Table>

            {/* <Pagination pagination={{pageSize:7}} simple  />   */}
            <Adduser adduser={this.adduser.bind(this)} close={this.hideAddUserDialog} visible={this.state.showAddUserDialog} />
            <EditUser edituser={this.edituser.bind(this)}  data={this.state.editUserRow} close={this.hideEditUserDialog} visible={this.state.showEditUserDialog} />
       
        </div>
    );
  }
}

